<!-- 书城的首页 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--<base th:href="${#request.getContextPath()}+'/'">-->
    <title>追光人书城</title>
    <link rel="stylesheet" href="../static/css/layui.css" th:href="@{/css/layui.css}">
    <link rel="stylesheet" href="../static/css/index.css" th:href="@{/css/index.css}">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--<link rel="stylesheet" th:href="@{/css/element-ui.css}" href="../static/css/element-ui.css">-->
    <!-- 必须先引入vue，再引入elementui -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.7.9"></script>-->
    <script th:src="@{/js/vue.js}" src="../static/js/vue.js"></script>
    <!-- 引入elementui组件库-->
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <script th:src="@{/js/element-ui.js}" src="../static/js/element-ui.js"></script>
    <!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script th:src="@{/js/axios.min.js}" src="../static/js/axios.min.js"></script>


</head>

<body>

<!-- 顶部 -->
<header>

    <!-- 顶部导航栏 -->
    <div class="header-nav">
        <div class="header-wrap content-center">
            <div class="header-left">
                <span>网罗天下图书</span>&nbsp;
                <span>传承中华文明</span>
            </div>
            <div class="header-right">
                <span th:each="cookie,cookieStat : ${#httpServletRequest.getCookies()}" style="margin-right: 0px;">
                    <span th:if="${cookie.getName() == 'username'}" th:text="${cookie.value}"></span>
                    <span th:if="${cookie.getName() == 'username'}" >
                        <a class="header-right-a" th:href="@{/signout}" href="login.html">退出</a>
                    </span>
                </span>
                <span class="basicShow">
                    <a class="header-right-a" th:href="@{/login}" href="login.html">登录 </a>/
                    <a class="header-right-a" th:href="@{regist}" href="regist.html">注册 </a>
                </span>

                <span>消息</span>
                <span><a class="header-right-a" th:href="@{/cart}" href="login.html">购物车 </a></span>
                <span>我的订单</span>
                <span>个人中心</span>
                <span>卖家中心</span>
                <span>手机版</span>
                <span>|</span>
                <span>送至北京</span>
                <span><a class="header-right-a" href="http://localhost:7070">后台管理 </a></span>
            </div>
        </div>
    </div>

    <div class="header-search">
        <!-- 搜索框 -->
        <div class="header-search-wrap content-center">
            <!-- logo图案 -->
            <div class="header-logo">
                <img th:src="@{/img/logo-220.png}" src="https://www.kongfz.com/static/kfz-searchBar/logo-220.png" alt="">
            </div>
            <div class="header-search-content">
                <!-- logo旁边的搜索框 -->
                <div class="header-search-input">
                    <input type="text">
                    <button type="button" class="layui-btn">搜索</button>
                </div>
                <div class="header-search-bread-crumb">
                    <div class="layui-breadcrumb" lay-separator="|">
                        <a href="">任溶溶</a>
                        <a href="">红楼梦特装</a>
                        <a href="">薛范</a>
                        <a href="">张北海</a>
                        <a href="">张思之</a>
                        <a href="">乔羽文集</a>
                        <a href="">倪匡</a>
                        <a href="">李树声</a>
                        <a href="">张祥龙</a>
                        <a href="">关汉卿</a>
                        <a href="">刘震云</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 主体 -->
<main>
    <div id="root">
        <!-- 导航栏 -->
        <div class="main-nav">
            <ul class="layui-nav content-center" lay-filter="">
                <li class="layui-nav-item layui-this"><a href="" style="color: #000000; font-size: 16px;">首页</a></li>
                <li class="layui-nav-item"><a href="" style="color: #000000; font-size: 16px;">书店区</a></li>
                <li class="layui-nav-item"><a href="" style="color: #000000; font-size: 16px;">书摊区</a></li>
                <li class="layui-nav-item"><a href="" style="color: #000000; font-size: 16px;">新书</a></li>
                <li class="layui-nav-item"><a href="" style="color: #000000; font-size: 16px;">在线拍卖</a></li>
                <li class="layui-nav-item"><a th:href="@{/book1}" href="" style="color: #000000; font-size: 16px;">艺术品专场</a>
                </li>
                <li class="layui-nav-item"><a href="" style="color: #000000; font-size: 16px;">动态</a></li>
                <li class="layui-nav-item"><a href="" style="color: #000000; font-size: 16px;">直播</a></li>
            </ul>
        </div>

        <!-- 基础菜单 -->
        <div class="main-menu">
            <div class="main-menu-left">
                <div class="layui-panel">
                    <ul class="layui-menu" id="docDemoMenu1">
                        <li lay-options="{id: 100}" class="main-menu-left-red">
                            <div class="layui-menu-body-title">图书&nbsp;<span
                                    style="font-size: 10px; float: right;">最新上书</span></div>
                        </li>
                        <li class="layui-menu-item-parent" lay-options="{type: 'parent'}" v-for="menu in menuData">
                            <div class="layui-menu-body-title">
                                {{ menu.classificationName }}
                                <i class="layui-icon layui-icon-right"></i>
                            </div>
                            <div class="layui-panel layui-menu-body-panel">
                                <ul>
                                    <li lay-options="{id: 1051}" v-for="child in menu.children">
                                        <div class="layui-menu-body-title">
                                            {{ child.classificationName }}
                                        </div>
                                    </li>
                                    <!--<li lay-options="{id: 1051}">
                                        <div class="layui-menu-body-title">menu item 5-2</div>
                                    </li>-->
                                </ul>
                            </div>
                        </li>
                        <!--                    <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    期刊/报纸/外文古旧书
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    国学古籍/收藏鉴赏
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    小说/文学/语言文字
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    历史/地理/艺术
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    政治/法律/军事
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    哲学/心理/宗教
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    经济/心理/宗教
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    经济/社科/综合
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    童书/生活/体育
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    工程技术/互联网
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    自然科学/医学卫生
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    教材/教辅/考试
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    红色文献/签名本
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    名人墨迹/名人字画
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    古旧地图/照片影像
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    连环画/版画宣传画
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    笔墨/纸本/卡片
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                                <div class="layui-menu-body-title">
                                                    日历/包袋/壳套
                                                    <i class="layui-icon layui-icon-right"></i>
                                                </div>
                                                <div class="layui-panel layui-menu-body-panel">
                                                    <ul>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-1</div>
                                                        </li>
                                                        <li lay-options="{id: 1051}">
                                                            <div class="layui-menu-body-title">menu item 5-2</div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>-->
                    </ul>
                </div>
                <div class="main-menu-images">
                    <div class="main-menu-item">
                        <img src="../static/img/item1.png" th:src="@{/img/item1.png}" alt="">
                    </div>
                    <div class="main-menu-item">
                        <img src="../static/img/item2.png" th:src="@{/img/item2.png}" alt="">
                    </div>
                    <div class="main-menu-item">
                        <img src="../static/img/item3.jpg" th:src="@{/img/item3.jpg}" alt="">
                    </div>
                    <div class="main-menu-item">
                        <img src="../static/img/item4.jpg" th:src="@{/img/item4.jpg}" alt="">
                    </div>
                    <div class="main-menu-item">
                        <img src="../static/img/item5.jpg" th:src="@{/img/item5.jpg}" alt="">
                    </div>
                    <div class="main-menu-item">
                        <img src="../static/img/item6.jpg" th:src="@{/img/item6.jpg}" alt="">
                    </div>
                </div>
            </div>
            <div class="main-menu-right">
                <!-- 轮播图 -->
                <div class="main-carousel">
                    <div class="layui-carousel" id="test1">
                        <div carousel-item>
                            <div><img src="../static/img/carousel1.jpg" th:src="@{/img/carousel1.jpg}" alt=""></div>
                            <div><img src="../static/img/carousel2.jpg" th:src="@{/img/carousel2.jpg}" alt=""></div>
                            <div><img src="../static/img/carousel3.jpg" th:src="@{/img/carousel3.jpg}" alt=""></div>
                            <div><img src="../static/img/carousel4.jpg" th:src="@{/img/carousel4.jpg}" alt=""></div>
                            <div><img src="../static/img/carousel5.jpg" th:src="@{/img/carousel5.jpg}" alt=""></div>
                            <div><img src="../static/img/carousel6.jpg" th:src="@{/img/carousel6.jpg}" alt=""></div>
                            <div><img src="../static/img/carousel7.jpg" th:src="@{/img/carousel7.jpg}" alt=""></div>
                            <div><img src="../static/img/carousel8.jpg" th:src="@{/img/carousel8.jpg}" alt=""></div>
                        </div>
                    </div>
                </div>
                <!-- 好书推荐 -->
                <div class="main-menu-book-recommend" id="show-book">
                    <div class="main-menu-book-recommend-title">
                        好书推荐
                    </div>
                    <div class="main-menu-book-content">
                        <ul class="main-menu-book-lists">
                            <li class="main-menu-book-list" v-for="book in books" :key="book.bookId">
                                <img src=""
                                     :src="book.bookImg"
                                     alt="">
                                <div class="main-menu-book-title">
                                    <a href="">{{book.bookName}}</a>
                                </div>
                                <div class="main-menu-book-author">——{{book.bookAuthor}}</div>
                                <div class="main-menu-book-price">￥{{book.bookPrice}}</div>
                                <a href="" @click.prevent="buyBook(book.bookName, book.bookPrice)"
                                   class="main-menu-book-cart layui-btn layui-btn-sm layui-btn-normal">购买</a>
                            </li>
                        </ul>
                    </div>
                    <div class="main-menu-book-page">
                        <el-pagination
                                background
                                layout="prev, pager, next"
                                :page-size="15"
                                :total="bookTotal"
                                @current-change="handleCurrentChange"
                        >
                        </el-pagination>
                    </div>
                </div>

                <!-- 好书广场 -->
                <div class="">

                </div>
            </div>
        </div>

        <!-- 店铺推荐 -->
        <div class="main-shop">
            <div class="main-shop-top">
                <h1>店铺推荐</h1>
            </div>
            <div class="main-shop-left">
                <div class="main-shop-left-title">
                    <span>新近出版</span>
                    <a href="">/更多</a>
                </div>
                <div class="main-shop-new-book">
                    <div class="main-shop-book-item">
                        <img src="../static/img/book1.png" th:src="@{/img/book1.png}" alt="">
                        <div class="main-shop-book-title">
                            <a href="">翦商：殷周之变与华夏新生</a>
                        </div>
                        <div class="main-shop-book-author">——李硕</div>
                        <div class="main-shop-book-price">￥45.00</div>
                        <a href="" class="main-shop-book-cart layui-btn layui-btn-xs">购物车</a>
                    </div>
                    <div class="main-shop-book-item">
                        <img src="../static/img/book1.png" th:src="@{/img/book1.png}" alt="">
                        <div class="main-shop-book-title">
                            <a href="">翦商：殷周之变与华夏新生</a>
                        </div>
                        <div class="main-shop-book-author">——李硕</div>
                        <div class="main-shop-book-price">￥45.00</div>
                        <a href="" class="main-shop-book-cart layui-btn layui-btn-xs">购物车</a>
                    </div>
                    <div class="main-shop-book-item">
                        <img src="../static/img/book1.png" th:src="@{/img/book1.png}" alt="">
                        <div class="main-shop-book-title">
                            <a href="">翦商：殷周之变与华夏新生</a>
                        </div>
                        <div class="main-shop-book-author">——李硕</div>
                        <div class="main-shop-book-price">￥45.00</div>
                        <a href="" class="main-shop-book-cart layui-btn layui-btn-xs">购物车</a>
                    </div>
                    <div class="main-shop-book-item">
                        <img src="../static/img/book1.png" th:src="@{/img/book1.png}" alt="">
                        <div class="main-shop-book-title">
                            <a href="">翦商：殷周之变与华夏新生</a>
                        </div>
                        <div class="main-shop-book-author">——李硕</div>
                        <div class="main-shop-book-price">￥45.00</div>
                        <a href="" class="main-shop-book-cart layui-btn layui-btn-xs">购物车</a>
                    </div>
                    <div class="main-shop-book-item">
                        <img src="../static/img/book1.png" th:src="@{/img/book1.png}" alt="">
                        <div class="main-shop-book-title">
                            <a href="">翦商：殷周之变与华夏新生</a>
                        </div>
                        <div class="main-shop-book-author">——李硕</div>
                        <div class="main-shop-book-price">￥45.00</div>
                        <a href="" class="main-shop-book-cart layui-btn layui-btn-xs">购物车</a>
                    </div>
                    <div class="main-shop-book-item">
                        <img src="../static/img/book1.png" th:src="@{/img/book1.png}" alt="">
                        <div class="main-shop-book-title">
                            <a href="">翦商：殷周之变与华夏新生</a>
                        </div>
                        <div class="main-shop-book-author">——李硕</div>
                        <div class="main-shop-book-price">￥45.00</div>
                        <a href="" class="main-shop-book-cart layui-btn layui-btn-xs">购物车</a>
                    </div>
                    <div class="main-shop-book-item">
                        <img src="../static/img/book1.png" th:src="@{/img/book1.png}" alt="">
                        <div class="main-shop-book-title">
                            <a href="">翦商：殷周之变与华夏新生</a>
                        </div>
                        <div class="main-shop-book-author">——李硕</div>
                        <div class="main-shop-book-price">￥45.00</div>
                        <a href="" class="main-shop-book-cart layui-btn layui-btn-xs">购物车</a>
                    </div>
                    <div class="main-shop-book-item">
                        <img src="../static/img/book1.png" th:src="@{/img/book1.png}" alt="">
                        <div class="main-shop-book-title">
                            <a href="">翦商：殷周之变与华夏新生</a>
                        </div>
                        <div class="main-shop-book-author">——李硕</div>
                        <div class="main-shop-book-price">￥45.00</div>
                        <a href="" class="main-shop-book-cart layui-btn layui-btn-xs">购物车</a>
                    </div>
                    <div class="main-shop-book-item">
                        <img src="../static/img/book1.png" th:src="@{/img/book1.png}" alt="">
                        <div class="main-shop-book-title">
                            <a href="">翦商：殷周之变与华夏新生</a>
                        </div>
                        <div class="main-shop-book-author">——李硕</div>
                        <div class="main-shop-book-price">￥45.00</div>
                        <a href="" class="main-shop-book-cart layui-btn layui-btn-xs">购物车</a>
                    </div>
                    <div class="main-shop-book-item">
                        <img src="../static/img/book1.png" th:src="@{/img/book1.png}" alt="">
                        <div class="main-shop-book-title">
                            <a href="">翦商：殷周之变与华夏新生</a>
                        </div>
                        <div class="main-shop-book-author">——李硕</div>
                        <div class="main-shop-book-price">￥45.00</div>
                        <a href="" class="main-shop-book-cart layui-btn layui-btn-xs">购物车</a>
                    </div>
                    <div class="main-shop-book-item">
                        <img src="../static/img/book1.png" th:src="@{/img/book1.png}" alt="">
                        <div class="main-shop-book-title">
                            <a href="">翦商：殷周之变与华夏新生</a>
                        </div>
                        <div class="main-shop-book-author">——李硕</div>
                        <div class="main-shop-book-price">￥45.00</div>
                        <a href="" class="main-shop-book-cart layui-btn layui-btn-xs">购物车</a>
                    </div>
                    <div class="main-shop-book-item">
                        <img src="../static/img/book1.png" th:src="@{/img/book1.png}" alt="">
                        <div class="main-shop-book-title">
                            <a href="">翦商：殷周之变与华夏新生</a>
                        </div>
                        <div class="main-shop-book-author">——李硕</div>
                        <div class="main-shop-book-price">￥45.00</div>
                        <a href="" class="main-shop-book-cart layui-btn layui-btn-xs">购物车</a>
                    </div>
                </div>
            </div>
            <div class="main-shop-right">
                <div class="main-shop-right-title">
                    <span>图书销售排行榜</span>
                    <a href="">/更多</a>
                </div>
                <div class="main-shop-leader-board">
                    <a href="" class="main-shop-leader-title">1.活着</a>
                    <div class="main-shop-leader-price">￥1.00起</div>
                    <div class="main-shop-leader-author">余华</div>
                </div>
                <div class="main-shop-leader-board">
                    <a href="" class="main-shop-leader-title">2.活着</a>
                    <div class="main-shop-leader-price">￥1.00起</div>
                    <div class="main-shop-leader-author">余华</div>
                </div>
                <div class="main-shop-leader-board">
                    <a href="" class="main-shop-leader-title">3.活着</a>
                    <div class="main-shop-leader-price">￥1.00起</div>
                    <div class="main-shop-leader-author">余华</div>
                </div>
                <div class="main-shop-leader-board">
                    <a href="" class="main-shop-leader-title">4.活着</a>
                    <div class="main-shop-leader-price">￥1.00起</div>
                    <div class="main-shop-leader-author">余华</div>
                </div>
                <div class="main-shop-leader-board">
                    <a href="" class="main-shop-leader-title">4.活着</a>
                    <div class="main-shop-leader-price">￥1.00起</div>
                    <div class="main-shop-leader-author">余华</div>
                </div>
                <div class="main-shop-leader-board">
                    <a href="" class="main-shop-leader-title">4.活着</a>
                    <div class="main-shop-leader-price">￥1.00起</div>
                    <div class="main-shop-leader-author">余华</div>
                </div>
                <div class="main-shop-leader-board">
                    <a href="" class="main-shop-leader-title">4.活着</a>
                    <div class="main-shop-leader-price">￥1.00起</div>
                    <div class="main-shop-leader-author">余华</div>
                </div>
                <div class="main-shop-leader-board">
                    <a href="" class="main-shop-leader-title">4.活着</a>
                    <div class="main-shop-leader-price">￥1.00起</div>
                    <div class="main-shop-leader-author">余华</div>
                </div>
                <div class="main-shop-leader-board">
                    <a href="" class="main-shop-leader-title">4.活着</a>
                    <div class="main-shop-leader-price">￥1.00起</div>
                    <div class="main-shop-leader-author">余华</div>
                </div>
                <div class="main-shop-leader-board">
                    <a href="" class="main-shop-leader-title">4.活着</a>
                    <div class="main-shop-leader-price">￥1.00起</div>
                    <div class="main-shop-leader-author">余华</div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 底部 -->
<footer>
    <div class="footer-box">
        <div class="footer-box-left">
            © 2002-2022 Kongfz.com 追光人书城网 版权所有
        </div>
        <div class="footer-box-right">
            <a href="">关于追光 </a>
            <a href="">联系我们 </a>
            <a href="">帮助中心 </a>
            <a href="">版权隐私 </a>
            <a href="">广告业务 </a>
            <a href="">工作机会 </a>
            <a href="">移动版 </a>
            <a href="">图书目录 </a>
            <a href="">图书标签 </a>
            <a href="">热搜书籍 </a>
            <a href="">作家大全</a>
        </div>
        <div class="footer-box-center1">
            京ICP证041501号 | 京公网安备 11010502035846号 | 出版物经营许可证 | 企业营业执照 | 宗教信息服务许可证
        </div>
        <div class="footer-box-center2">
            违法和不良信息举报电话：010-89648155， 违法和不良信息/涉未成年人有害信息投诉 shenhe@kongfz.com
        </div>
        <div class="footer-box-img">
            <img src="../static/img/wangxin.png" th:src="@{/img/wangxin.png}" alt="">
            <img src="../static/img/shilaohua.png" th:src="@{/img/shilaohua.png}" alt="">
        </div>
    </div>
</footer>

</body>

</html>

<script src="../static/js/layui.js" th:src="@{/js/layui.js}"></script>
<script src="../static/js/index.js" th:src="@{/js/index.js}"></script>
